<template>
  <a-scrollbar type="track">
    <a-collapse
      expand-icon-position="right"
      :default-active-key="['container','basic','advanced', 'system']"
    >
      <a-collapse-item key="container" header="容器">
        <draggable
          v-model:list="CONTAINER_CONFIG"
          item-key="type"
          class="item-container"
          :force-fallback="true"
          :group="{ name: 'select',pull : 'clone'}"
          :clone="containerClone"
        >
          <template #item="{ element }">
            <div class="item">
              <component
                :is="element.selectIcon"
                v-if="element.selectIcon"
              />
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </a-collapse-item>
      <a-collapse-item key="basic" header="基础组件">
        <draggable
          v-model:list="BASIC_CONFIG"
          class="item-container"
          item-key="type"
          :force-fallback="true"
          :group="{ name: 'select', pull: 'clone'}"
          :clone="basicClone"
        >
          <template #item="{ element }">
            <div class="item">
              <component :is="element.selectIcon" v-if="element.selectIcon" />
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </a-collapse-item>
      <a-collapse-item key="advanced" header="高级组件">
        <draggable
          v-model:list="ADVANCED_CONFIG"
          class="item-container"
          item-key="type"
          :force-fallback="true"
          :group="{ name: 'select',pull : 'clone'}"
          :clone="advancedClone"
        >
          <template #item="{ element }">
            <div class="item">
              <component :is="element.selectIcon" v-if="element.selectIcon" />
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </a-collapse-item>
      <a-collapse-item key="system" header="业务组件">
        <draggable
          v-model:list="SYSTEM_CONFIG"
          class="item-container"
          item-key="type"
          :force-fallback="true"
          :group="{ name: 'select', pull : 'clone'}"
          :clone="systemClone"
        >
          <template #item="{ element }">
            <div class="item">
              <component :is="element.selectIcon" v-if="element.selectIcon" />
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </a-collapse-item>
    </a-collapse>
  </a-scrollbar>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue';
import { cloneDeep } from 'lodash';
import { getComponentId } from '@/components/form-design/utils';
import {
  CONTAINER_CONFIG,
  BASIC_CONFIG,
  ADVANCED_CONFIG,
  SYSTEM_CONFIG
} from '@/components/form-design/item-select/config/config';
import Draggable from 'vuedraggable';
import { ComponentConfig } from '@/components/form-design/item-select/config/type';

const emits = defineEmits(['dragClone']);

const containerClone = (origin: ComponentConfig) => {
  const result = cloneDeep(origin);
  result.id = getComponentId(result.type);
  if (result.subComponents) {
    result.subComponents.forEach(item => {
      item.id = getComponentId(result.type);
    });
  }
  emits('dragClone', result);
  return result;
};

const basicClone = (origin: any) => {
  const result = cloneDeep(origin);
  result.id = getComponentId(result.type);
  emits('dragClone', result);
  return result;
};

const advancedClone = (origin: any) => {
  const result = cloneDeep(origin);
  result.id = getComponentId(result.type);
  emits('dragClone', result);
  return result;
};

const systemClone = (origin: any) => {
  const result = cloneDeep(origin);
  result.id = getComponentId(result.type);
  emits('dragClone', result);
  return result;
};
</script>

<script lang="ts">
export default {
  name: 'ItemSelect'
};
</script>

<style lang="less" scoped>
::v-deep(.arco-collapse-item-content) {
  position: relative;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  color: var(--color-text-1);
  font-size: 14px;
  background-color: var(--color-fill-1);
}

.item-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 5px;
  padding: 5px 15px;
  width: 45%;
  background-color: var(--color-bg-1);
  border: 1px solid #E2E2E2;
  border-radius: 5px;
  font-size: 12px;
}

.item:hover {
  background-color: #409EFF;
}
</style>